<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GNB</title>

<!-- 
	[ step ]

	01. 1뎁스 기본 레이아웃.
	02. 2뎁스 기본 레이아웃.
	03. 1뎁스 인터렉티브 적용.
	04. step03 단계 코드 리펙토링.
	05. 1뎁스 인터렉티브 모션적용.
	06. 서브메뉴 이동.
	07. 서브아이템 인터렉션.
	08. 서브아이템 컨테이너 마스크.
	09. 하이라이터.
	10. 선택값 설정.
	11. 사이즈 조절과 서브값 없을 때 예외처리.
	12. JQuery 플러그인 변경.
	13. JQuery 플러그인 변경-2.
	14. JQuery 플러그인 변경-3.
-->

<link rel="stylesheet" type="text/css" href="css/depth2_gnb_01.css">

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="jquery/depth2_gnb_type_01.js"></script>
<script type="text/javascript">
	$( document ).ready( function(){
		

		$( ".gnb" ).depth2GNBType01( { selectedIndex:[ 0, 1 ] } );  
		
		$( ".gnb2" ).depth2GNBType01( { 
			tweenSpeed:300,

			activeDepth2Item:function( j_item ){
				if( !j_item ) return;
				j_item.css( { color: "#FF9900" } );
			},

			deactiveDepth2Item:function( j_item ){
				if( !j_item ) return;
				j_item.css( "color", "black" );
			},

			showDepth2Contaner:function( j_container ){

			},

			hideDepth2Contaner:function( j_conainer ){
				
			},

			showHighlighter:function( j_highlighter, j_item ){
				var itemPosX = j_item.position().left;
				j_highlighter.stop();
				j_highlighter.css( {left:itemPosX, width:j_item.outerWidth() } );
				j_highlighter.animate( { height:j_item.outerHeight() }, 300 ); 
			},

			hideHighlighter:function( j_highlighter ){
				j_highlighter.animate( { height:0 }, 300 ); 	
			}			
		} );
	});
</script>

</head>
<body>
	<div class="gnb">
		<div class="depth1_container">
			<div class="highlighter"> </div>
			<ul class="depth1_menu_item_list ">
					<li class="depth1_menu_item">
						<div>Info</div>
						<div>소개</div>
					</li>
					<li class="depth1_menu_item">
						<div>Communty</div>
						<div>커뮤니티</div>
					</li>
					<li class="depth1_menu_item">
						<div>Study</div>
						<div>스터디</div>
					</li>
					<li class="depth1_menu_item">
						<div>Store</div>
						<div>스토어</div>
					</li>
					<li class="depth1_menu_item">
						<div>Event</div>
						<div>이벤트</div>
					</li>
			</ul>
			
		</div>

		<div class="depth2_mask">
			<div class="depth2_container">
				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Hello Webdongne</li>
						<li class="depth2_menu_item">Contact Us</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Free Board</li>
						<li class="depth2_menu_item">Forum</li>
						<li class="depth2_menu_item">Issue</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">HTML/CSS</li>
						<li class="depth2_menu_item">Java Script</li>
						<li class="depth2_menu_item">JQuery</li>
						<li class="depth2_menu_item">Edge</li>
						<li class="depth2_menu_item">Node JS</li>
						<li class="depth2_menu_item">HTML5</li>
						<li class="depth2_menu_item">Tizen</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Web Contents</li>
						<li class="depth2_menu_item">E-Book</li>
						<li class="depth2_menu_item">Video Tutorial</li>
				</ul>
			</div>
		</div>
	</div>


	<div class="gnb2">
		<div class="depth1_container">
			<div class="highlighter"> </div>
			<ul class="depth1_menu_item_list ">
					<li class="depth1_menu_item">
						<div>Info</div>
						<div>소개</div>
					</li>
					<li class="depth1_menu_item">
						<div>Communty</div>
						<div>커뮤니티</div>
					</li>
					<li class="depth1_menu_item">
						<div>Study</div>
						<div>스터디</div>
					</li>
					<li class="depth1_menu_item">
						<div>Store</div>
						<div>스토어</div>
					</li>
					<li class="depth1_menu_item">
						<div>Event</div>
						<div>이벤트</div>
					</li>
			</ul>
			
		</div>

		<div class="depth2_mask">
			<div class="depth2_container">
				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Hello Webdongne</li>
						<li class="depth2_menu_item">Contact Us</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Free Board</li>
						<li class="depth2_menu_item">Forum</li>
						<li class="depth2_menu_item">Issue</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">HTML/CSS</li>
						<li class="depth2_menu_item">Java Script</li>
						<li class="depth2_menu_item">JQuery</li>
						<li class="depth2_menu_item">Edge</li>
						<li class="depth2_menu_item">Node JS</li>
						<li class="depth2_menu_item">HTML5</li>
						<li class="depth2_menu_item">Tizen</li>
				</ul>

				<ul class="depth2_menu_item_list">
						<li class="depth2_menu_item">Web Contents</li>
						<li class="depth2_menu_item">E-Book</li>
						<li class="depth2_menu_item">Video Tutorial</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>